<template>
	<view class="wrap">
		<view class="content">
			<view class="title">欢迎注册图书商城</view>
			<view class="mianbox">
				<view>
					<view class="iconfont icon-wode"></view>
					<input type="text" v-model="data.params.name" placeholder="请输入用户名" />
				</view>
				<view>
					<view class="iconfont icon-icon-test33"></view>
					<input type="email" v-model="data.params.email" placeholder="请输入邮箱号" />
				</view>
				<view>
					<view class="iconfont icon-icon-test26"></view>
					<input type="password" v-model="data.params.password" placeholder="请输入密码" />
				</view>
				<view>
					<view class="iconfont icon-icon-test26"></view>
					<input type="password" v-model="data.params.password_confirmation" placeholder="请输入确认密码" />
				</view>
			</view>
			<button class="getCaptcha" @tap="addlogon">注册</button>
			<view class="alternative">
				<view class="issue" @tap="submit">登录</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';
	const {
		proxy
	} = getCurrentInstance();
	import {
		getregister
	} from '@/http/api.js';
	onMounted(() => {

	})
	const data = reactive({
		params: {
			password_confirmation: '',
			password: '',
			email: '',
			name: ''
		},
		rules: {
			name: {
				rule: /^[\u4E00-\u9FA5]{2,10}(·[\u4E00-\u9FA5]{2,10}){0,2}$/,
				msg: '用户名2到10位汉字'
			},
			email: {
				rule: /^\w+@[a-z0-9]+\.[a-z]+$/i,
				msg: '邮箱格式不对'
			},
			password: {
				rule: /^[0-9a-zA-Z]{6,16}$/,
				msg: '密码应该为6-16位'
			}
		}
	});
	const emit = defineEmits(['emitsublogon']);
	const addlogon = () => {
		if (!validate('password')) return;
		if (!validate('name')) return;
		if (!validate('email')) return;
		if (data.params.password !== data.params.password_confirmation) {
			//提示信息
			uni.showToast({
				title: '密码不一致',
				icon: 'none'
			});
			return;
		}
		// 注册
		getregister(data.params).then(res => {
			console.log(res);
			if (res == '') {
				emit('emitsublogon');

				uni.showToast({
					title: '注册成功',
					icon: 'success'
				});
			} else {
				uni.showToast({
					title: res.errors.email[0],
					icon: 'error'
				});
			}
		});
		// 验证通过，请求注册
		// const res = await this.$u.api.authUserRegister(this.params);
		// 注册成功重定向到登录页
	};
	const submit = () => {
		emit('emitsublogon');
	};
	//判断验证是否符合要求
	const validate = key => {
		console.log(key);
		let bool = true;
		if (!data.rules[key].rule.test(data.params[key])) {
			//提示信息
			uni.showToast({
				title: data.rules[key].msg,
				icon: 'none'
			});
			//取反
			bool = false;
			return false;
		}
		return bool;
	};
</script>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100vh;
		padding: 0 20px;

		.content {
			// width: 600px;
			width: 100%;

			.title {
				text-align: center;
				font-size: 30px;
				font-weight: 500;
				// margin-bottom: 30px;
			}
		}

		.mianbox>view {
			display: flex;
			align-items: center;
			padding: 10px 0;
			height: 50px;
			border-bottom: 1px dashed #000;

			.iconfont {
				// font-size: 40px;
				padding: 0 10px;
			}

			input {
				flex: 1;
				// font-size: 30px;
			}
		}

		.getCaptcha {
			box-shadow: 0 2px 2px rgba(100, 100, 100, 0.1);
			background: linear-gradient(to right, #3388ee, #4db9f1);
			color: #f8f8f8;
			margin: 40px 0;
		}

		.alternative {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
		}
	}
</style>